<template>
    <div class="login">
        <div class="bgimg">
            <!-- <img src="../assets/imgs/logo.png" class="nbimg"> -->
            <!-- form表单 -->
            <el-form :model="user" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="username">
                    <el-input type="text" v-model="user.username" autocomplete="off" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" show-password v-model="user.password" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" round @click="submitForm">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>



    </div>
</template>


<script>

export default {
    data() {
        return {
            user: {
                username: "admin",
                password: "admin888"

            },
            rules: {
                nickname: {
                    required: true, message: "请输入账号", trigger: "blur"
                },
                password: {
                    required: true, message: "请输入密码", trigger: "blur"
                }
            }
        }

    },
    methods: {
        submitForm() {
            // 判空
            // 获取表单
            // console.log(this.$refs.ruleForm.validate());
            this.$refs.ruleForm.validate((value) => {
                if (value) {
                    // 获取接口
                    this.$Api.userLogin(this.user).then(res => {
                        // 登陆成功
                        // console.log(res);
                        if (res.code == 200) {
                            // 轻提示
                            this.$message.success(res.msg)
                            // 存储token
                            sessionStorage.setItem("admininfo", JSON.stringify(res.list))
                            // 页面跳转
                            setTimeout(() => {
                                this.$router.push("/layout")
                            }, 1000)
                        }
                    })
                    // return
                }
            })
        }
    }

}

</script>


<style scoped>
.login {
    width: 100vw;
    height: 100vh;
    /* background-color: #FF6C53; */
}

.bgimg {
    width: 950px;
    height: 100vh;
    margin: 0 auto;
    background: url(../assets/imgs/gif.jpg) no-repeat;
    background-size: 950px 100vh;
    position: relative;
}

.nbimg {
    width: 380px;
    position: absolute;
    right: 90px;
    top: 100px;
}

.demo-ruleForm {
    width: 390px;
    position: absolute;
    right: 90px;
    top: 300px;
}

.el-button--primary {
    width: 390px;
}
</style>